<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>用户注册</title>
    <!--css style-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="responsive/flexible.css">
    <script src="responsive/flexible.js"></script>
</head>
<body class="personal_center registration">
    <header>
        <a href="javascript:void(0)" class="pre_page"></a>
        用户注册
    </header>

    <section class="main">
       <div class="container">

           <form action="reg_suc.html" class="registration_form container">
               <div class="error_message"></div>
               <ul>
                   <li>
                       <span>用户名：</span>
                       <input type="text"
                              placeholder="用户名设置后不可修改，可用于登陆" id="name" name="name" onblur="checkAccountName(this)">
                   </li>
                   <li>
                       <span>设置密码：</span>
                       <input type="password" placeholder="建议至少使用两种字符组合" id="password" name="password" onblur="checkEmpty(this,'设置您的密码')">
                   </li>
                   <li>
                       <span>设置密码：</span>
                       <input type="password" placeholder="再次输入密码" id="re_password" name="password">
                   </li>
                   <li>
                       <span>手机号码：</span>
                       <input type="text" placeholder="建议填写常用手机" name="telephone" id="telephone" onblur="checkTel(this)">
                   </li>
                   <li>
                       <span>短信验证：</span>
                       <input type="text" placeholder="请输入验证码" id="valid_code"  onblur="checkValidCode(this)">
                       <input type="button" class="get_code" id="get_code" onclick="checkCode()" value="获取验证码">
                       <p class="prompt">短信验证码已发送到您的手机，请及时查收</p>
                   </li>
                   <div class="clear"></div>
               </ul>

               <input type="submit" value="立即注册" onclick="checkInfo()">
           </form>
           <p>已有账号,<a href="login.html">立即登陆</a></p>

       </div>

    </section>


</body>
<script src="js/jquery.js"></script>
<script>
    var b_isPwdValid=false;
    $(function(){

        /*密码强度以及密码格式*/
        $('#password').keyup(function () {
            var $this=$(this);
            var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");//密码强
            var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");//密码中
            var enoughRegex = new RegExp("(?=.{6,}).*", "g");//密码弱
            var noSpaceRegex=new RegExp("^[^\\s]*$","g");//非空格
            var charRegex=new RegExp("^(?![\\d]+$)(?![a-zA-Z]+$)(?![!#$%^&\\\\\/\\|\\.@~\\+\\={}();,:''*]+$)[\\da-zA-Z!#$%^&\\\\\/\\|\\.@~\\+\\={}();,:''*]{6,20}$","g");//字母、数字及标点符号至少包含2种

            /*6-20个字符*/
            if($this.val().length>6&&$this.val().length<20){
                //$(".cryp_strength h6").eq(0).addClass("active");
                /*不包含空格*/
                if(noSpaceRegex.test($this.val())){
                    //$(".cryp_strength h6").eq(1).addClass("active");

                }else{
                    //$(".cryp_strength h6").eq(1).removeClass("active");
                }
                /*字母、数字及标点符号至少包含2种*/
                if(charRegex.test($this.val())){
                    //$(".cryp_strength h6").eq(2).addClass("active");
                }else{
                    //$(".cryp_strength h6").eq(2).removeClass("active");
                }
            }else{
                //$(".cryp_strength h6").removeClass("active");
            }

            /*只能包含字母、数字及标点符号（除空格）*/

            /*字母、数字及标点符号至少包含2种*/


            if (false == enoughRegex.test($(this).val())) {
                /*$("h5 i").removeClass('high');
                 $("h5 i").removeClass('mid');
                 $("h5 i").addClass('low');*/
                //密码小于六位的时候，密码强度图片都为灰色
            }
            else if (strongRegex.test($(this).val())) {
                //console.log("1111"+$(this).val());
                /*$("h5 i").removeClass('low');
                 $("h5 i").removeClass('mid');
                 $("h5 i").addClass('high');*/
                //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强
            }
            else if (mediumRegex.test($(this).val())) {
                /*$("h5 i").removeClass('high');
                 $("h5 i").removeClass('low');
                 $("h5 i").addClass('mid');*/
                //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
            }
            else {
                /*$("h5 i").removeClass('high');
                 $("h5 i").removeClass('mid');
                 $("h5 i").addClass('low');*/
                //如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的
            }
            return true;
        });

        $("#password").blur(function(){
            if($("#re_password").val()!=''){
                if($("#password").val()!=$("#re_password").val()){
                    alert("两次密码不一致");
                    b_isPwdValid=false;
                }else{
                    b_isPwdValid=true;
                }
            }
        });
        $("#re_password").blur(function(){
            if($("#password").val()!=''){
                if($("#password").val()!=$("#re_password").val()){
                    alert("两次密码不一致");
                    b_isPwdValid=false;
                }else{
                    b_isPwdValid=true;
                }
            }
        });
    });
    /*检测账户名是否正确*/
    function checkAccountName(obj){
        obj.errorFlag = false;
        obj.errorMessage ="";
        var value = obj.value;
        if (checkEmpty(obj,"请设置您的账户名")) {//判断是不是为空
            obj.errorFlag = true;
            return obj.errorFlag;
        }else{
            if (value.length > 25) {
                obj.errorFlag = true;
                obj.errorMessage = "账户名不能大于25位";
            }
            if (!is_forbid(value)) {
                obj.errorFlag = true;
                obj.errorMessage = "账户名中含有非法字符";
            }
        }
        if(obj.errorFlag){
            showErrorMessage(obj.errorMessage);
        }else {
            clearErrorMessage();
        }
        return obj.errorFlag;
    }

    /*校验手机号码*/
    function checkTel(obj){
        obj.errorFlag = false;
        if (checkEmpty(obj,'请您填写手机号码')) {
            obj.errorFlag = true;
            return  obj.errorFlag;
        }
        if(!(/^1[3|4|5|7|8]\d{9}$/.test(obj.value))){
            showErrorMessage("输入手机号码不正确");
            obj.errorFlag = true;
        }else {
            clearErrorMessage();
        }
        return  obj.errorFlag;
    }

    /*get code*/
    var codeTimer=null;
    var time=120;
    function checkCode(){
        if(!checkTel(document.getElementById("telephone"))){
            var obj=document.getElementById("valid_code");
            //console.log(obj)
            $(".get_code").addClass("grey");
            codeTimer=setInterval(function () {
                $(".get_code").val(time+"s后重新获取");
                time--;
            },1000);
            $(".prompt").show();
            obj.code="123";
            //console.log(obj.code);
        }

    }
    /*检验验证码*/
    function checkValidCode(obj){
        obj.errorFlag = false;
        if(!checkTel(document.getElementById("telephone"))){
            if (checkEmpty(obj,'请您填写验证码')) {
                obj.errorFlag = true;
                return  obj.errorFlag;
            }
            //console.log(obj.value+":"+obj.code);
            if(obj.value!=obj.code){
                showErrorMessage("输入验证码不正确");
                $('p.red').show();
                obj.errorFlag = true;

            }else{
                clearErrorMessage();
                $('p.red').hide();

            }
        }
        return  obj.errorFlag;
    }
    /*检测是否为空*/
    function checkEmpty(obj,message){
        if(obj.value==''){
            showErrorMessage(message);
            return true;
        }else{
            clearErrorMessage();
            return false;
        }
    }

    /**
     * 检查是否含有非法字符
     * @param temp_str
     * @returns {Boolean}
     */
    function is_forbid(temp_str){
        temp_str = temp_str.replace(/(^\s*)|(\s*$)/g, "");
        temp_str = temp_str.replace('--',"@");
        temp_str = temp_str.replace('/',"@");
        temp_str = temp_str.replace('+',"@");
        temp_str = temp_str.replace('\'',"@");
        temp_str = temp_str.replace('\\',"@");
        temp_str = temp_str.replace('$',"@");
        temp_str = temp_str.replace('^',"@");
        temp_str = temp_str.replace('.',"@");
        temp_str = temp_str.replace(';',"@");
        temp_str = temp_str.replace('<',"@");
        temp_str = temp_str.replace('>',"@");
        temp_str = temp_str.replace('"',"@");
        temp_str = temp_str.replace('=',"@");
        temp_str = temp_str.replace('{',"@");
        temp_str = temp_str.replace('}',"@");
        var forbid_str = new String('@,%,~,&');
        var forbid_array = new Array();
        forbid_array = forbid_str.split(',');
        for(i=0;i<forbid_array.length;i++){
            if(temp_str.search(new RegExp(forbid_array[i])) != -1)
                return false;
        }
        return true;
    }
    /*检查地址信息是否合格*/
    function checkInfo(){
        var elAccountName=document.getElementById("name");
        var elAdrress=document.getElementById("address");
        var elTel=document.getElementById("telephone");
        if(checkAccountName(elAccountName)){
            $(".registration_form").submit(false);
            return;
        }
        if(!b_isPwdValid){
            showErrorMessage("您的密码设置有误");
            $(".registration_form").submit(false);
            return;
        }
        if(checkTel(elTel)){
            $(".registration_form").submit(false);
            return;
        }
        var elCode=document.getElementById("valid_code");
        if(checkValidCode(elCode)){
            $(".registration_form").submit(false);
        }else{

        }


    }
    function showErrorMessage(message){
        $(".error_message").html("*"+message);
    }

    function clearErrorMessage() {
        $(".error_message").html("");
    }

</script>
</html>